<template>
  <el-card class="content-card">
    <template #header>
      <el-tabs v-model="internalActiveTab" type="border-card">
        <el-tab-pane label="任务概览" name="tasks">
          <template #label>
            <div class="tab-label">
              <el-icon><List /></el-icon>
              <span>任务概览</span>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="缺陷概览" name="defects">
          <template #label>
            <div class="tab-label">
              <el-icon><Warning /></el-icon>
              <span>缺陷概览</span>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="需求概览" name="requirements">
          <template #label>
            <div class="tab-label">
              <el-icon><Document /></el-icon>
              <span>需求概览</span>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="最近活动" name="activities">
          <template #label>
            <div class="tab-label">
              <el-icon><Timer /></el-icon>
              <span>最近活动</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>

    <div v-if="internalActiveTab === 'tasks'" class="tab-content">
      <div class="section-header">
        <h3>任务概览</h3>
        <div class="section-actions">
          <el-button size="small" @click="emit('view-tasks')">查看全部</el-button>
        </div>
      </div>

      <div class="stats-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <StatCardItem title="任务总数" :value="String(projectTaskCount)" icon="Document" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="已完成" :value="String(completedTaskCount)" icon="CircleCheck" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="进行中" :value="String(activeTaskCount)" icon="Timer" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="待处理" :value="String(pendingTaskCount)" icon="List" />
          </el-col>
        </el-row>
      </div>

      <el-table
        :data="taskDisplayList"
        size="small"
        stripe
        class="preview-table"
        v-loading="tasksLoading"
        :empty-text="tasksLoading ? '加载中...' : '暂无任务记录'"
      >
        <el-table-column prop="title" label="任务标题" min-width="220" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getTaskStatusType(scope.row.status)">
              {{ getTaskStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="scope">
            <el-tag :type="getTaskPriorityType(scope.row.priority)">
              {{ getTaskPriorityText(scope.row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assignee_name" label="负责人" width="120" show-overflow-tooltip />
        <el-table-column prop="due_date" label="截止日期" width="140">
          <template #default="scope">
            {{ formatDate(scope.row.due_date) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-else-if="internalActiveTab === 'defects'" class="tab-content">
      <div class="section-header">
        <h3>缺陷概览</h3>
        <div class="section-actions">
          <el-button size="small" @click="emit('view-defects')">查看全部</el-button>
        </div>
      </div>

      <div class="stats-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <StatCardItem title="缺陷总数" :value="String(projectDefectCount)" icon="Document" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="未解决" :value="String(openDefectCount)" icon="Warning" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="已解决" :value="String(resolvedDefectCount)" icon="CircleCheck" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="已关闭" :value="String(closedDefectCount)" icon="Timer" />
          </el-col>
        </el-row>
      </div>

      <el-table
        :data="defectDisplayList"
        size="small"
        stripe
        class="preview-table"
        v-loading="defectsLoading"
        :empty-text="defectsLoading ? '加载中...' : '暂无缺陷记录'"
      >
        <el-table-column prop="title" label="缺陷标题" min-width="220" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getDefectStatusType(scope.row.status)">
              {{ getDefectStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="scope">
            <el-tag :type="getDefectPriorityType(scope.row.priority)">
              {{ getDefectPriorityText(scope.row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assignee_name" label="负责人" width="120" show-overflow-tooltip />
        <el-table-column prop="created_at" label="创建日期" width="140" :formatter="formatTableDate" />
      </el-table>
    </div>

    <div v-else-if="internalActiveTab === 'requirements'" class="tab-content">
      <div class="section-header">
        <h3>需求概览</h3>
        <div class="section-actions">
          <el-button size="small" @click="emit('view-requirements')">查看全部</el-button>
        </div>
      </div>

      <div class="stats-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <StatCardItem title="需求总数" :value="String(projectRequirementCount)" icon="Document" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="已完成" :value="String(completedRequirementCount)" icon="CircleCheck" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="进行中" :value="String(activeRequirementCount)" icon="Timer" />
          </el-col>
          <el-col :span="6">
            <StatCardItem title="待处理" :value="String(pendingRequirementCount)" icon="List" />
          </el-col>
        </el-row>
      </div>

      <el-table
        :data="requirementDisplayList"
        size="small"
        stripe
        class="preview-table"
        v-loading="requirementsLoading"
        :empty-text="requirementsLoading ? '加载中...' : '暂无需求记录'"
      >
        <el-table-column prop="title" label="需求标题" min-width="220" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getRequirementStatusType(scope.row.status)">
              {{ getRequirementStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="scope">
            <el-tag :type="getRequirementPriorityType(scope.row.priority)">
              {{ getRequirementPriorityText(scope.row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_by_name" label="创建者" width="120" show-overflow-tooltip />
        <el-table-column prop="created_at" label="创建日期" width="140" :formatter="formatTableDate" />
      </el-table>
    </div>

    <div v-else class="tab-content">
      <div class="section-header">
        <h3>最近活动</h3>
      </div>

      <div class="activities-list">
        <div
          v-for="activity in activityDisplayList"
          :key="activity.id"
          class="activity-item"
        >
          <div class="activity-icon" :class="getActivityIconClass(activity.type)">
            <el-icon>
              <component :is="getActivityIcon(activity.type)" />
            </el-icon>
          </div>
          <div class="activity-content">
            <div class="activity-title">{{ activity.user }} {{ activity.action }}</div>
            <div class="activity-description">{{ activity.description }}</div>
            <div class="activity-time">{{ formatRelativeTime(activity.time) }}</div>
          </div>
        </div>
        <div v-if="activityDisplayList.length === 0" class="empty-activities">
          暂无活动记录
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed, type PropType } from 'vue'
import { List, Warning, Document, Timer, User } from '@element-plus/icons-vue'
import StatCardItem from './StatCardItem.vue'
import {
  formatDate,
  formatRelativeTime,
  getTaskStatusType,
  getTaskStatusText,
  getTaskPriorityType,
  getTaskPriorityText,
  getDefectStatusType,
  getDefectStatusText,
  getDefectPriorityType,
  getDefectPriorityText,
  getRequirementStatusType,
  getRequirementStatusText,
  getRequirementPriorityType,
  getRequirementPriorityText,
  getActivityIconClass
} from '../utils'

const formatTableDate = (_row: unknown, _column: unknown, cellValue: string) => formatDate(cellValue)

interface ActivityItem {
  id: string
  user: string
  action: string
  description: string
  type: string
  time: number
}

const props = defineProps({
  activeTab: {
    type: String,
    default: 'tasks'
  },
  taskPreviewList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  defectPreviewList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  requirementPreviewList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  recentActivities: {
    type: Array as PropType<ActivityItem[]>,
    default: () => []
  },
  tasksLoading: Boolean,
  defectsLoading: Boolean,
  requirementsLoading: Boolean,
  projectTaskCount: {
    type: Number,
    default: 0
  },
  completedTaskCount: {
    type: Number,
    default: 0
  },
  activeTaskCount: {
    type: Number,
    default: 0
  },
  pendingTaskCount: {
    type: Number,
    default: 0
  },
  projectDefectCount: {
    type: Number,
    default: 0
  },
  openDefectCount: {
    type: Number,
    default: 0
  },
  resolvedDefectCount: {
    type: Number,
    default: 0
  },
  closedDefectCount: {
    type: Number,
    default: 0
  },
  projectRequirementCount: {
    type: Number,
    default: 0
  },
  completedRequirementCount: {
    type: Number,
    default: 0
  },
  activeRequirementCount: {
    type: Number,
    default: 0
  },
  pendingRequirementCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits([
  'update:activeTab',
  'create-task',
  'view-tasks',
  'create-defect',
  'view-defects',
  'create-requirement',
  'view-requirements',
  'view-requirement'
])

const internalActiveTab = computed({
  get: () => props.activeTab,
  set: value => emit('update:activeTab', value)
})

const MAX_PREVIEW_ITEMS = 5

const taskDisplayList = computed(() => props.taskPreviewList.slice(0, MAX_PREVIEW_ITEMS))
const defectDisplayList = computed(() => props.defectPreviewList.slice(0, MAX_PREVIEW_ITEMS))
const requirementDisplayList = computed(() => props.requirementPreviewList.slice(0, MAX_PREVIEW_ITEMS))
const activityDisplayList = computed(() => props.recentActivities.slice(0, MAX_PREVIEW_ITEMS))

const activityIconMap: Record<string, any> = {
  task: List,
  project: Document,
  member: User,
  defect: Warning,
  requirement: Document
}

const getActivityIcon = (type: string) => activityIconMap[type] || List
</script>

<style scoped>
.content-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
}

:deep(.el-card__header) {
  padding: 0;
  border: none;
  background: transparent;
}

:deep(.el-tabs--border-card) {
  border: none;
  box-shadow: none;
  background: transparent;
}

:deep(.el-tabs__header) {
  margin: 0 0 24px;
  background: transparent;
  border-bottom: 2px solid #f1f5f9;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 4px;
}

:deep(.el-tabs__item) {
  padding: 0 24px;
  height: 48px;
  line-height: 48px;
  font-weight: 500;
  color: #64748b;
  border: none !important;
  transition: all 0.3s ease;
  position: relative;
}

:deep(.el-tabs__item:hover) {
  color: #409eff;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-tabs__item.is-active::after) {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 24px;
  right: 24px;
  height: 3px;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border-radius: 2px 2px 0 0;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.tab-label :deep(.el-icon) {
  font-size: 16px;
}

.tab-content {
  padding: 8px 0 0;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.3px;
}

.section-actions {
  display: flex;
  gap: 12px;
}

.section-actions :deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.section-actions :deep(.el-button--primary) {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);
}

.section-actions :deep(.el-button--primary):hover {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
  transform: translateY(-1px);
}

.preview-table {
  margin-top: 0;
  background-color: transparent;
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

:deep(.el-table th) {
  background: transparent;
  color: #475569;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f1f5f9;
}

:deep(.el-table__row) {
  transition: all 0.2s ease;
}

:deep(.el-table__row:hover) {
  background: #f8fafc;
  transform: scale(1.01);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #fafbfc;
}

:deep(.el-button--text) {
  color: #64748b;
  font-weight: 500;
  transition: all 0.2s ease;
}

:deep(.el-button--text):hover {
  color: #409eff;
  transform: translateX(2px);
}

.stats-container {
  margin-bottom: 28px;
}

:deep(.el-row) {
  margin: 0 -10px;
}

:deep(.el-col) {
  padding: 0 10px;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.activity-item:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #e2e8f0;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.activity-icon {
  margin-right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.activity-item:hover .activity-icon {
  transform: scale(1.1) rotate(5deg);
}

.activity-icon-task {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.activity-icon-task :deep(.el-icon) {
  color: #3b82f6;
  font-size: 20px;
}

.activity-icon-member {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.activity-icon-member :deep(.el-icon) {
  color: #10b981;
  font-size: 20px;
}

.activity-icon-defect {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

.activity-icon-defect :deep(.el-icon) {
  color: #f59e0b;
  font-size: 20px;
}

.activity-icon-project :deep(.el-icon),
.activity-icon-requirement :deep(.el-icon) {
  color: #8b5cf6;
  font-size: 20px;
}

.activity-icon-project {
  background: linear-gradient(135deg, #e9d5ff 0%, #ddd6fe 100%);
}

.activity-icon-requirement {
  background: linear-gradient(135deg, #e9d5ff 0%, #ddd6fe 100%);
}

.activity-icon-default :deep(.el-icon) {
  color: #64748b;
  font-size: 20px;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #1e293b;
  font-size: 15px;
}

.activity-description {
  color: #64748b;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.activity-time {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.empty-activities {
  text-align: center;
  color: #94a3b8;
  padding: 60px 20px;
  font-size: 14px;
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .section-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .activity-item {
    padding: 12px;
  }

  .activity-icon {
    width: 36px;
    height: 36px;
    margin-right: 12px;
  }
}
</style>

